<template>
    <nav class="ls-channel-nav">
      <div id="ls-primary-nav-row" class="row">
        <ul class="primary-nav">
          <li class="primary-nav-tab home" @click="changePage('home',$event)">
            <span :style="{color: isActivity ? '#fff': ''}">
              Home
            </span>
          </li>
          <li class="primary-nav-tab categories" @click="changePage('categories',$event)" id="Categories">
            <span :style="{color: isActivity ? '#fff': ''}">
              Categories
            </span>
          </li>
          <li class="primary-nav-tab limited-deals" @click="changePage('limited-deals',$event)" >
            <span :style="{color: isActivity ? '#fff': ''}">
              Limited Deals
            </span>
          </li>
          <li class="primary-nav-tab Affiliate" @click="changePage('Affiliate',$event)">
            <span :style="{color: isActivity ? '#fff': ''}">
              Affiliate
            </span>
          </li>
          <li class="primary-nav-tab hot" @click="changePage('hot',$event)">
            <span class="span-bg" :style="{color: isActivity ? '#fff': ''}">
              Hot
            </span>
          </li>
          <li class="primary-nav-tab new" @click="changePage('new',$event)">
            <span :style="{color: isActivity ? '#fff': ''}">
              New
            </span>
          </li>
        </ul>
      </div>
      <div id="ls-rail" class="ls-rail row"><span id="ls-rail-slide" :style="liStyle"></span></div>
      <Nav ref="categoriesBox"></Nav>
    </nav>
</template>

<script type="text/ecmascript-6">
  import Nav from 'base/nav/nav'
    export default {
        props: {
          isActivity: {
            type: Boolean,
            default: false
          }
        },
        data(){
          return{
            isShowScroll : false,
            liStyle: {
              width:0,
              left:0,
              display:'none',
            }
          }
        },
        mounted() {
          const _this = this
          $('.primary-nav').hover(function () {
            _this.liStyle.display = 'block'
          }, function () {
            _this.liStyle.display = 'none'
          })
          $('.primary-nav-tab').hover(function () {
            let width1 = $(this).width() + 20 + 'px';
            let indexNum = $(this).index();
            let left1 = 0;
            if (indexNum > 0) {
              let offset1 = $('.primary-nav-tab').eq(0).offset().left
              let offset2 = $(this).offset().left
              left1 = offset2 - offset1 + 'px';
            }

            _this.changeStyle(width1, left1)
          })

          $(() => {
            let $A = $("#Categories"), $B = $("#subnav");
            $B.hide();
            var timer=null;
            $A.mouseover(function(){
              clearTimeout(timer);
              $B.show();
            }).mouseout(function(){
              timer=setTimeout(function(){
                $B.hide();
              },100)
            });
            $B.mouseover(function(){
              clearTimeout(timer);
              $B.show();
            }).mouseout(function(){
              timer=setTimeout(function(){
                $B.hide();
              },100)
            })
          })
        },
        methods: {
          changeStyle(width,left){
            this.liStyle.width = width
            this.liStyle.left = left
          },
          changePage(path){
            $('.primary-nav-tab').removeClass('active');
            $(event.currentTarget).addClass("active")
            let pathGo ='/'+path +'';
            this.$router.push(pathGo);
          },
          checkTitle(str){
              $('.primary-nav-tab').removeClass('active');
              $('.'+str).addClass("active")
          }
        },
        watch : {
          '$route' (to,from){
            if(to.path ==='/home' || to.path ==='/limited-deals'|| to.path ==='/Affiliate' || to.path ==='/categories' || to.path ==='/hot' || to.path ==='/new' || to.path ==='/activity'){
              let str = to.path.substring(1)
              this.checkTitle(str)
            }
          }
        },
        computed :{
        },
      components:{
        Nav
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .ls-channel-nav
    border-bottom: 1px solid #d5d8db;
    padding: 0;
    margin: 0;
    .row
      margin: 0 auto;
      max-width: 1080px;
      width: 100%;
      z-index 1
      .primary-nav
        height: auto;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        cursor: default;
        margin: 0;
        padding: 0 10px;
        list-style: none;
        font-weight: 300;
        .primary-nav-tab
          text-align: center;
          padding: 0;
          cursor: default;
          &:first-child
            text-align: left;
          &:last-child
            text-align: right;
        span
          line-height: 45px;
          margin: 0;
          padding: 0;
          display: inline-block;
          position: relative;
          text-align: center;
          white-space: nowrap;
          cursor: pointer;
          font-size: 16px;
          font-weight: 400;
          color: #75787b;
          &:hover
            color:#18823a!important
        .active
          span
            color:#18823a!important
        .span-bg
          padding-left:20px;
          background url(fire_75787b.svg) no-repeat left 14px
          &:hover
            color:#18823a!important
            background url(fire_red.png) no-repeat left 14px
  .ls-rail
    position: relative;
    z-index: 2;
  #ls-rail-slide
    content: "";
    position: absolute;
    pointer-events: none;
    border: 8px solid transparent;
    border-bottom-color: #18823a;
    background: #18823a;
    display: none;
    margin: 0;
    left: 50%;
    bottom: 0;
    -webkit-transform: none;
    transform: none;
    height: 3px;
    border: 0;
    top: -2px;
    transition: left .1s ease-in-out, width .1s ease-in-out;

</style>
